<!-- 自定义主页，使用 default 布局 + 自定义 tabBar 组件，解决 tabBar 首次切换闪烁的问题。 -->
<route lang="json5">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabBar.homeText%',
  },
  needLogin: false,
}
</route>

<template>
  <ea-navbar :bordered="false" :safeAreaInsetTop="true" :fixed="true" placeholder selector="home">
    <template #capsule>
      <ea-navbar-capsule
        left-icon="i-ic:sharp-settings-voice"
        left-icon-type="unocss"
        right-icon="i-tdesign:scan"
        right-icon-type="unocss"
      />
    </template>
  </ea-navbar>
  <view class="overflow-hidden">
    <!-- <view class="mt-12">
        <image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
        <wd-icon name="scan1" size="22px"></wd-icon>
      </view>
      <view class="text-center text-4xl main-title-color mt-4">unibest</view>
      <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
  
      <view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
      <view class="text-center mt-8">
        当前平台是：
        <text class="text-green-500">{{ PLATFORM.platform }}</text>
      </view>
      <view class="text-center mt-4">
        模板分支是：
        <text class="text-green-500">tabbar</text>
      </view> -->

    <profile v-if="tabBarStore.getIndex === 'profile'" />
  </view>
  <!-- 自定义 tabBar -->
  <ea-tabbar :id="tabBarId" :switch-tab="false" :show-more="true" />
  <!-- 自定义 tabBar -->
</template>

<script lang="ts" setup>
  import { EaNavbar } from '@/components/ea-navbar';
  import { EaNavbarCapsule } from '@/components/ea-navbar-capsule';
  import { EaTabbar, useTabBarStore } from '@/components/ea-tabbar';
  import { Profile } from '@/pages/sys/profile';
  import PLATFORM from '@/utils/platform';

  defineOptions({ name: 'Home' });

  const tabBarId = 'home';
  const tabBarStore = useTabBarStore(tabBarId);

  // 获取屏幕边界到安全区域距离
  // const { safeAreaInsets } = uni.getSystemInfoSync();

  // 测试 uni API 自动引入
  onLoad(() => {
    // console.log(author)
  });
</script>
